<template>
  <div class="details">
      <!-- 商品详情页 -->
      <div class="top">
          <span @click="fun()">&lt;</span>
          <p>{{this.$route.query.littletext}}</p>
      </div>
      <img :src="this.$route.query.littleimg" class="goodsimg">
      <h5 v-html="this.$route.query.price"></h5>
      <div class="text">
          <p><span class="span1">邮政产品</span>{{this.$route.query.littletext}}</p>
          <div class="collect">
              <img src="/shop/collect.png" class="collectimg">
              <p>收藏</p>
          </div>
      </div>
      <div class="sendgoods">
          <p><span class="sp1">送至</span>请选择收货地址<span class="sp2">...</span></p>
          <p><span class="sp1">发货</span>中国邮政&nbsp;&nbsp;|&nbsp;&nbsp;快递：免运费<span class="sp2">...</span></p>
          <p><span class="sp1">服务</span>邮乐卡支付<span class="sp2">...</span></p>
      </div>
      <div class="null"></div>
      <footer>
          <div class="left">
              <Icon class="icon" v-for="(v,i) in icontext" :key="i" :content="v.content" :icon="v.icon"/>
          </div>
          <div class="right">
              <div class="add">加入购物车</div>
              <div class="buy">立即购买</div>
          </div>
      </footer>
  </div>
</template>

<script>
import Icon from '../components/user/icon.vue'
export default {
    methods:{
        fun(){
            this.$router.go(-1);
        }
    },
    components:{
        Icon
    },
    data(){
        return {
            icontext:[
                {content:'客服',icon:'iconfont icon-erji'},
                {content:'店铺',icon:'iconfont icon-shangcheng'},
                {content:'购物车',icon:'iconfont icon-gouwuchekong'}
            ]
        }
    }
}
</script>

<style scoped>
.details{
    background-color: #f3f3f3;
}
.top{
    display: flex;
    position: fixed;
    top:0;
    z-index: 999;;
    background-color: #fff;
    height:0.28rem;
}
.top span{
    font-size:0.28rem;
    line-height: 0.28rem;
    transform: translateY(-0.02rem);
}
.top p{
    width:3.3rem;
    font-size:0.18rem;
    line-height: 0.28rem;
    text-align: center;
}
.goodsimg{
    width:3.1rem;
    height:3.5rem;
    display: block;
    margin:auto;
    margin-top:0.6rem
}
h5{
    font-size:0.16rem;
    line-height: 0.3rem;
    margin-top:0.1rem;
    margin-left:0.15rem
}
.text{
    width:3.4rem;
    height:0.5rem;
    margin:auto;
    display: flex;
    background-color: #fff;
    padding-top:0.05rem
}
.text p{
    font-size:0.16rem;
    line-height: 0.24rem;
    width:2.8rem
}
.text p .span1{
    background-color: #417051;
    color:white;
    padding:0.03rem;
    border-radius: 0.03rem;
    margin-right:0.2rem
}
.collect img{
    width:0.2rem;
    height:0.2rem;
    display: block;
    margin-left:0.07rem
}
.collect p{
    width:0.5rem
}
.sendgoods{
    width:100%;
    height:1.5rem;
    background-color: #fff;
    margin-top:0.1rem;
}
.sendgoods p{
    width:100%;
    font-size:0.14rem;
    line-height: 0.5rem;
    border-bottom:1px solid gray;
    position: relative;
}
.sendgoods p .sp1{
    color:gray;
    margin-left:0.1rem;
    margin-right:0.15rem
}
.sendgoods p .sp2{
    position: absolute;
    right:0.1rem;
    top:-0.07rem;
    font-size:0.3rem;
}
.null{
    width:100%;
    height:0.6rem
}
footer{
    width:100%;
    height:0.5rem;
    position: fixed;
    bottom:0;
    display: flex;
    /* background-color: pink; */
}
.left{
    width:1.6rem;
    height:100%;
    background-color: white;
    display: flex;
    justify-content: space-evenly;
}
.icon{
    transform: translateY(-0.05rem);
}
.right{
    width:2rem;
    height:100%;
    display: flex;
}
.add{
    width:50%;
    height:100%;
    background-color: #ec7c3b;
    color:white;
    font-size:0.16rem;
    line-height: 0.5rem;
    text-align: center;
}
.buy{
    width:50%;
    height:100%;
    background-color: #ce3b35;
    color:white;
    font-size:0.16rem;
    line-height: 0.5rem;
    text-align: center;
}
</style>